শর্তাধীন Rendering এর মাধ্যমে UI পরিবর্তন

Riot.js-এ শর্তাধীন Rendering (Conditional Rendering) ব্যবহার করা হয় UI-এর কিছু অংশ বা উপাদান শুধুমাত্র নির্দিষ্ট শর্তে প্রদর্শন করার জন্য। এর মাধ্যমে আপনি কম্পোনেন্টের বিভিন্ন স্টেট বা ভেরিয়েবল অনুসারে UI কন্টেন্ট পরিবর্তন করতে পারেন।

শর্তাধীন Rendering এর ধারণা:

Riot.js-এ শর্তাধীন Rendering সাধারনত {condition && content} বা {condition ? trueContent : falseContent} স্টাইলের সিনট্যাক্স ব্যবহার করে করা হয়। এটি JavaScript এক্সপ্রেশন ব্যবহার করে শর্ত বসানো সম্ভব করে।

উদাহরণ:

১. Boolean condition ব্যবহার করে:

<my-component>
  <button onclick={toggleMessage}>Toggle Message</button>
  
  <!-- Show the message based on the condition -->
  {isVisible && <p>{message}</p>}

  <script>
    export default {
      onMounted() {
        this.isVisible = false;  // Initially, the message is hidden
        this.message = 'Hello, this is a conditional message!';
      },

      toggleMessage() {
        this.isVisible = !this.isVisible; // Toggle the visibility of the message
      }
    }
  </script>
</my-component>

ব্যাখ্যা:

• এখানে, isVisible একটি শর্ত হিসাবে ব্যবহার করা হচ্ছে। যখন isVisible সত্য (true) হবে, তখন <p>{message}</p> প্রদর্শিত হবে।
• toggleMessage ফাংশনটি বোতামে ক্লিক করার সময় isVisible এর মান পরিবর্তন করবে এবং বার্তা দেখাবে বা লুকাবে।

২. তিনটি শর্তের মধ্যে পছন্দ নির্বাচন (Conditional Rendering with Ternary Operator):

<my-component>
  <button onclick={changeStatus}>Change Status</button>

  <!-- Show different content based on condition -->
  <p>{status ? 'The status is Active' : 'The status is Inactive'}</p>

  <script>
    export default {
      onMounted() {
        this.status = false;  // Initially status is Inactive
      },

      changeStatus() {
        this.status = !this.status; // Toggle the status between Active and Inactive
      }
    }
  </script>
</my-component>

ব্যাখ্যা:

• এখানে, status ভেরিয়েবলটি শর্ত হিসেবে ব্যবহার করা হচ্ছে এবং ternary operator (condition ? trueContent : falseContent) ব্যবহার করে দুইটি ভিন্ন বার্তা দেখানো হচ্ছে।
• যখন status সত্য হবে, তখন "The status is Active" বার্তাটি দেখাবে, আর যদি status মিথ্যা হয়, তখন "The status is Inactive" দেখাবে।

৩. বিভিন্ন উপাদান শর্ত অনুসারে Render করা:

<my-component>
  <button onclick={toggleView}>Toggle View</button>

  <!-- Conditional rendering of different content -->
  {viewMode === 'list' ? <ul><li>Item 1</li><li>Item 2</li></ul> : <div>Grid View</div>}

  <script>
    export default {
      onMounted() {
        this.viewMode = 'list';  // Initially, list view is selected
      },

      toggleView() {
        this.viewMode = this.viewMode === 'list' ? 'grid' : 'list'; // Toggle between 'list' and 'grid' view
      }
    }
  </script>
</my-component>

ব্যাখ্যা:

• এখানে, viewMode স্টেট অনুযায়ী শর্তাধীনভাবে list বা grid ভিউ প্রদর্শিত হবে।
• যখন viewMode "list" থাকবে, তখন একটি ul (unordered list) দেখাবে এবং অন্যথায় একটি "Grid View" বার্তা দেখাবে।

শর্তাধীন Rendering এর সুবিধা:

• ডাইনামিক UI: ব্যবহারকারী অ্যাকশন বা স্টেট পরিবর্তনের ভিত্তিতে UI পরিবর্তন করতে পারে।
• কোডের কমপ্লেক্সিটি কমানো: শর্ত ব্যবহার করে UI-এর বিভিন্ন অংশ সহজে পরিবর্তন করা যায়।
• রিয়েকটিভিটি: Riot.js-এর মাধ্যমে যখন ডেটা পরিবর্তিত হয়, তখন UI স্বয়ংক্রিয়ভাবে আপডেট হয়।

সারাংশ:

Riot.js-এ শর্তাধীন Rendering ব্যবহার করে, আপনি একটি নির্দিষ্ট শর্তের উপর ভিত্তি করে UI-এর অংশ বা উপাদানগুলো পরিবর্তন করতে পারেন। এটি অ্যাপ্লিকেশনকে আরও ডাইনামিক এবং রিয়েকটিভ করে তোলে, যেখানে ব্যবহারকারীর ইনপুট বা স্টেট পরিবর্তনের ভিত্তিতে UI পরিবর্তিত হয়।